<template>
  <VueDatePicker v-model="dates" :range="{ minRange: 0 }"
                 @update:model-value="setDate"
                 :format-locale="ja" :format="'yyyy-MM-dd'" :preview-format="'yyyy-MM-dd'"
                 :day-names="['一', '二', '三', '四', '五', '六', '日']"
                 :enable-time-picker="false"
                 class="w-full min-w-72" />
</template>

<script setup>
import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'
import { ja } from 'date-fns/locale';
import {formatDate} from "../utils/datetools/index.js";
const props = defineProps({
  // 字符串数组
  modelValue: Array,
})
const emit = defineEmits(['update:modelValue'])
const dates = ref([])
dates.value = props.modelValue

const setDate = (value) => {
  const tmpDates = []
  tmpDates[0] = formatDate(value[0])
  tmpDates[1] = formatDate(value[1])
  console.log(value)
  emit('update:modelValue', tmpDates)
}

</script>

<style scoped>

</style>